<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/166199438859374242.jpg"
          alt="banner1"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/166230772719664742.jpg"
          alt="banner2"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/166237225955755007.png"
          alt="banner3"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/20200720-59b99b9398884daabd2e9d18424f373a711269f9c49745b2.jpg"
          alt="banner4"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/20210506-bf20c94bbdda4bd99d9be623d69fd1b6f20b331cd973447c.jpg"
          alt="banner5"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/20211021-6474f7f341aa4cebbc34583d5c433e54ac69ed66f8374faf.jpg"
          alt="banner6"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/20220106-1cc7ad1973a74984988c9b6f9b5d4d27926dad45f8e94a87.jpg"
          alt="banner7"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="@/images/banner-images/20220321-d34cb9bcf1e84e0dab4a24d27297bc36f37dc8ff951445eb.jpg"
          alt="banner8"
        />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'

export default {
  name: 'XCarousel',
  mounted() {
    new Swiper('.swiper', {
      loop: true, // 循环模式选项
      autoplay: true, // 自动轮播

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  },
}
</script>

<style>
.swiper {
  width: 730px;
  height: 456px;
}
</style>
